<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p>我的订单</p>
		</header>

		<!-- 未支付订单 -->
		<h3>未支付订单信息：</h3>
		<ul class="unpaid-order">
			<li v-for="item in unpaidOrders" :key="item.orderId">
				<div class="order-info">
					<p>
						{{item.business.businessName}}
						<i class="fa fa-caret-down" @click="detailetShow(item)"></i>
					</p>
					<div class="order-info-right">
						<p>&#165;{{item.orderTotal}}</p>
						<div class="order-info-right-icon" @click="toPay(item.orderId)">去支付</div>
					</div>
				</div>
				<ul class="order-detailet" v-show="item.isShowDetailet">
					<li v-for="odItem in item.list" :key="odItem.foodId">
						<p>{{odItem.food.foodName}} x {{odItem.quantity}}</p>
						<p>&#165;{{odItem.food.foodPrice*odItem.quantity}}</p>
					</li>
					<li>
						<p>配送费</p>
						<p>&#165;{{item.business.deliveryPrice}}</p>
					</li>
				</ul>
			</li>
		</ul>

		<!-- 已支付订单 -->
		<h3>已支付订单信息：</h3>
		<ul class="paid-order">
			<li v-for="item in paidOrders" :key="item.orderId"> 
				<div class="order-info">
					<p>
						{{item.business.businessName}}
						<i class="fa fa-caret-down" @click="detailetShow(item)"></i>
					</p>
					<div class="order-info-right">
						<p>&#165;{{item.orderTotal}}</p>
					</div>
				</div>
				<ul class="order-detailet" v-show="item.isShowDetailet">
					<li v-for="odItem in item.list" :key="odItem.foodId">
						<p>{{odItem.food.foodName}} x {{odItem.quantity}}</p>
						<p>&#165;{{odItem.food.foodPrice*odItem.quantity}}</p>
					</li>
					<li>
						<p>配送费</p>
						<p>&#165;{{item.business.deliveryPrice}}</p>
					</li>
				</ul>
			</li>
		</ul>

		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script>
import Footer from '../components/Footer.vue';

export default {
	name: 'OrderList',
	data() {
		return {
			orderArr: [], // 所有订单数据
			user: {}
		}
	},
	created() {
		this.user = this.$getSessionStorage('user');

		// 获取所有订单（包括未支付订单）
		this.$axios.post('OrdersController/listOrdersByUserId', this.$qs.stringify({
			userId: this.user.userId
		})).then(response => {
			let result = response.data;
			console.log('未支付订单数据:', result); // 打印返回的所有订单

			// 为每个订单添加 isShowDetailet 属性
			const unpaidOrders = result.map(order => ({
				...order,
				isShowDetailet: false // 默认不显示详情
			}));
			
			// 获取已支付订单
			this.$axios.post('OrdersController/listPaidOrdersByUserId', this.$qs.stringify({
				userId: this.user.userId
			})).then(paidResponse => {
				let paidResult = paidResponse.data;
				console.log('已支付订单数据:', paidResult);
				
				// 为每个已支付订单添加 isShowDetailet 属性
				const paidOrders = paidResult.map(order => ({
					...order,
					isShowDetailet: false // 默认不显示详情
				}));
				
				// 合并所有订单
				this.orderArr = [...unpaidOrders, ...paidOrders];
			}).catch(error => {
				console.error('获取已支付订单失败:', error);
			});
		}).catch(error => {
			console.error('获取订单信息失败:', error);
		});
	},
	computed: {
		// 过滤未支付订单
		unpaidOrders() {
			return this.orderArr.filter(order => order.orderState === 0);
		},
		// 过滤已支付订单
		paidOrders() {
			const filteredOrders = this.orderArr.filter(order => order.orderState === 1);
    console.log('已支付订单:', filteredOrders); // 打印已支付订单
    return filteredOrders;
		}
	},
	methods: {
		detailetShow(order) {
			order.isShowDetailet = !order.isShowDetailet;
		},
		toPay(orderId) {
			this.$router.push({
				path: '/paymentPage',
				query: { orderId }
			});
			
		}
	},
	components: {
		Footer
	}
}
</script>


<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
	}


	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: royalblue;

		position: fixed;
		top: 0;
		left: 0;

		display: flex;
		justify-content: center;
		align-items: center;

		color: white;
		font-size: 5vw;
		font-weight: 700;
	}

	/****************** 历史订单列表部分 ******************/
	.wrapper h3 {
		margin-top: 12vw;
		box-sizing: border-box;
		padding: 4vw;
		font-size: 4vw;
		font-weight: 300;
		color: #999;
	}

	.wrapper .unpaid-order {
		width: 100%;
	}

	.wrapper .unpaid-order li {
		width: 100%;
	}

	.wrapper .unpaid-order li .order-info {
		box-sizing: border-box;
		padding: 2vw 4vw;
		font-size: 3.5vw;
		color: #666;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .unpaid-order li .order-info .order-info-right {
		display: flex;
	}

	.wrapper .unpaid-order li .order-info .order-info-right .order-info-right-icon {
		background-color: #f90;
		color: #fff;
		border-radius: 3px;
		margin-left: 2vw;
		user-select: none;
		cursor: pointer;
	}

	.wrapper .unpaid-order li .order-detailet {
		width: 100%;
	}

	.wrapper .unpaid-order li .order-detailet li {
		width: 100%;
		box-sizing: border-box;
		padding: 1vw 4vw;
		color: #666;
		font-size: 2.5vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.wrapper .paid-order {
		width: 100%;
		margin-bottom: 20vw;
	}
	
	.wrapper .paid-order li {
		width: 100%;
	}
	
	.wrapper .paid-order li .order-info {
		box-sizing: border-box;
		padding: 2vw 4vw;
		font-size: 3.5vw;
		color: #666;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.wrapper .paid-order li .order-info .order-info-right {
		display: flex;
	}
	
	.wrapper .paid-order li .order-info .order-info-right .order-info-right-icon {
		background-color: #f90;
		color: #fff;
		border-radius: 3px;
		margin-left: 2vw;
		user-select: none;
		cursor: pointer;
	}
	
	.wrapper .paid-order li .order-detailet {
		width: 100%;
	}
	
	.wrapper .paid-order li .order-detailet li {
		width: 100%;
		box-sizing: border-box;
		padding: 1vw 4vw;
		color: #666;
		font-size: 2.5vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>